<template>
  <div class="coin tabbar-iOS-height hideScrollBar" ref="scrollEl">
    <div class="content">
      <!-- 导航 -->
      <NavBar
        isFixed
        :isShowLeft="false"
        :title="$t('coin.pageTitle')"
        isTransparent
        :navScorllOffset="60"
        navScorllColor="#fff"
        :scrollEl="scrollEl"
      />
      <!-- 内容部分 -->
      <ClientOnly>
        <van-pull-refresh
          class="pull-refresh"
          v-model="pageData.loading"
          :pulling-text="t('mvp.other.text9')"
          :loosing-text="t('mvp.other.text10')"
          loading-text=" "
          @refresh="onRefreshRequest(true)"
        >
          <!-- 链上地址 -->
          <div class="chain">
            <!-- 背景图片 -->
            <img class="content-bgimg" src="/image/coin/content-bg.png" />
            <div class="chain-top">{{ t("mvp.coin.text9") }}</div>
            <div class="chain-num">{{ toThousands(5000000000) }} BDC</div>
            <div class="chain-bottom items-center">
              <div class="chain-bottom-text">
                {{ t("mvp.coin.text10") }}
              </div>
              <div class="items-center">
                <div
                  class="chain-bottom-url"
                  @click="jumpPage('webview1', false, TRONSCAN)"
                >
                  {{ TRONSCAN.copy.substring(0, 4) }}***{{
                    TRONSCAN.copy.substring(
                      TRONSCAN.copy.length - 4,
                      TRONSCAN.copy.length
                    )
                  }}
                </div>
                <img
                  class="chain-bottom-icon"
                  src="/image/coin/copy.svg"
                  @click="copyUrl"
                />
              </div>
            </div>
          </div>
          <!-- 当前阶段: BDC 2.0 -->
          <div class="stage" @click="jumpPage('pledge')">
            <div class="stage-title items-center">
              <div>{{ t("mvp.coin.text11") }}</div>
              <div class="stage-title-value">BDC 2.0</div>
            </div>
            <div class="stage-center items-center">
              <!-- 时间轴 -->
              <img class="stage-center-bg" src="/image/coin/sjz.svg" />
              <!-- 中间的文字 -->
              <div class="stage-center-text">
                <div>{{ $t("pledge.pageTitle") }}</div>
                <div class="stage-center-text-sjx"></div>
              </div>
            </div>
            <div class="items-center">
              <div class="stage-botton-text">{{ $t("activity.dqjddesc") }}</div>
              <img class="stage-botton-icon" src="/image/coin/ts-icon.svg" />
              <div class="stage-botton-value">20%</div>
            </div>
          </div>
          <!-- 白皮书 -->
          <div class="whatisbdc" @click="jumpPage('paper')">
            <div class="whatisbdc-header items-center">
              <div class="whatisbdc-header-title">
                {{ $t("mvp.coin.text5") }}
              </div>
              <div class="items-center">
                <div class="whatisbdc-header-text">
                  {{ $t("activity.cksy") }}
                </div>
                <img
                  class="whatisbdc-header-text-icon"
                  src="/image/jt-right-icon.svg"
                />
              </div>
            </div>
            <div class="items-center" style="margin-top: 11px">
              <img class="whatisbdc-left" src="/image/coin/bps.png" />
              <div class="whatisbdc-right">{{ $t("activity.bpsdesc") }}</div>
            </div>
          </div>
          <!-- banner 位置 -->
          <div v-if="pageData.bannerTopList.length > 0" class="banner">
            <van-swipe :autoplay="3000" lazy-render indicator-color="#007BFF">
              <van-swipe-item
                v-for="image in pageData.bannerTopList"
                :key="image.id"
                @click="jumpPage(image, true)"
              >
                <Images class="banner-img" :src="image.pic_path" isHttp />
              </van-swipe-item>
            </van-swipe>
          </div>
          <!-- 时间轴 -->
          <div
            v-if="pageData.majorList.length > 0"
            class="timeline"
            style="margin-bottom: 5px"
          >
            <div class="timeline-header items-center">
              <div class="timeline-header-title">
                {{ $t("coin.text27") }}
              </div>
              <div class="items-center" v-if="pageData.majorList.length > 3">
                <div
                  class="timeline-header-text"
                  @click="jumpPage('majorEvents')"
                >
                  {{ $t("activity.more") }}
                </div>
                <img
                  class="timeline-header-text-icon"
                  src="/image/jt-right-icon.svg"
                />
              </div>
            </div>

            <div class="eventList">
              <template v-for="(item, idx) in pageData.majorList">
                <div
                  v-if="idx < 3"
                  :key="item.id"
                  class="eventList-item"
                  :style="{
                    'padding-bottom':
                      idx + 1 === pageData.majorList.length ? '0' : '24px',
                  }"
                  @click="jumpPage('toPlan', false, item)"
                >
                  <!-- 日期 -->
                  <div class="items-center" style="margin-bottom: 10px">
                    <div class="eventList-item-icon" />
                    <div class="eventList-item-timeStr">
                      {{ item.createdTime }}
                    </div>
                  </div>
                  <!-- 图片和文案 -->
                  <div class="items-center">
                    <div class="items-center">
                      <div
                        class="eventList-item-left"
                        style="height: 78px"
                      ></div>
                      <Images
                        class="eventList-item-img"
                        :src="item.pic_path"
                        isHttp
                      />
                    </div>

                    <div style="margin-left: 10px">
                      <p v-if="item.title" class="eventList-item-title">
                        {{ item.title }}
                      </p>
                      <p
                        class="eventList-item-desc"
                        :class="{ 'eventList-item-desc-lines': !item.title }"
                      >
                        {{ item.summary }}
                      </p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 更多的大事件 -->
          <!-- <div
            v-if="pageData.majorList.length > 3"
            class="whatisbdc-bottom items-center"
            style="padding-bottom: 12px"
            @click="jumpPage('majorEvents')"
          >
            <div class="items-center whatisbdc-bottom-center">
              <div class="whatisbdc-bottom-text">
                {{ t("mvp.coin.text8") }}
              </div>
              <Images
                class="whatisbdc-bottom-icon"
                src="/image/mvp/coin/coin-right-jt.svg"
              ></Images>
            </div>
          </div> -->
          <!-- 底部按钮 -->
          <div class="footer">
            <div
              class="footer-item items-center"
              @click="jumpPage('circle2', true)"
            >
              <div class="footer-title">#BDC Coin#</div>
              <div class="footer-desc">
                {{ pageData.peopleTotal }}{{ t("mvp.coin.text6") }}
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="coin">
import { getArticleList, getBannerList } from "@/api/bdc";
import { getArticleDetail, getThemePeopleJoinCount } from "@/api/bdc";
import {
  navigateI18nTo,
  isiOS,
  jumpLocalH5PageRoute,
  toThousands,
  switchTabBar,
  getOssFileUrl,
} from "@/utils";
import { JUMPAPPS } from "~/config";
import { useGlobalStore } from "~~/store/global";
import { usePageVisibility, useWindowSize } from "@vant/use";
import { useDateFormat, useClipboard } from "@vueuse/core";
import { showToast } from "vant";

// definePageMeta({
//   keepalive: true,
// });

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

const { t } = useI18n();
// const route = useRoute();
// console.log("页面参数:", route.query);

// const pageCache = usePageCacheStore();
const firebase = useInitFirebase(); // 初始化firebase
// const globalStore = useGlobalStore();
// const isLogin = computed(() =>globalStore.isLogin);

// const { width, height } = process.client
//   ? useWindowSize()
//   : { width: ref(320), height: ref(667) };

// 接收滚动事件，传递给导航组件
const scrollEl = ref();
const imgUrl = getOssFileUrl({
  leftArrow: "/image/left-arrow.png",
  tooltipBg: "/image/mvp/assetDetails/tooltip-bg.png",
});

// 桥接
// bridge.hideToolbar(); // 调用原生app的函数
// 页面属性
const pageData = reactive({
  whiteTheme: true,
  loading: false,
  listArr: [], // 任务列表
  majorList: [], // 大事件列表
  bannerTopList: [], // 顶部banner数组
  bannerCenterList: [], // 预约banner数组
  peopleTotal: 0, // 参与讨论人数
});

// 页面刷新请求
const onRefreshRequest = (isRefresh) => {
  // 1. 获取参与讨论人数
  getThemePeopleJoinCount({
    themeId: 4310,
  }).then((res) => {
    // console.log("--getThemePeopleJoinCount--", res);
    if (res) {
      pageData.peopleTotal = res.peopleTotal;
    }
  });
  if (isRefresh === true) onLoadRequest();
};
// 不需要频繁的请求
const onLoadRequest = () => {
  try {
    // 1. 获取文章列表
    const a = getArticleList({
      pageNumber: 1,
      pageSize: 4,
      type: "79", // 类型必须是字符串
    }).then((res) => {
      if (res) {
        let majorList = [];
        // console.log("--获取文章列表--", res);
        majorList = res.list.list.map((e) => {
          e.createdTime = useDateFormat(
            Number(e.createdAt),
            "YYYY-MM-DD HH:mm:ss"
          );
          return e;
        });
        pageData.majorList = majorList;
      }
    });
    // 2. banner列表
    const b = getBannerList({ type: 1 }).then((res) => {
      if (res) {
        let bannerTopList = [];
        if (res.indexBanner && res.indexBanner.length > 0) {
          res.indexBanner.forEach((element) => {
            if (element.type == 29) {
              bannerTopList.push(element);
            }
          });
        }
        pageData.bannerTopList = bannerTopList;
      }
    });
    Promise.all([a, b]).finally(() => {
      pageData.loading = false;
    });
  } catch (error) {
    pageData.loading = false;
  }
};

// 生命周期 函数
onBeforeMount(() => {
  // console.log("--onBeforeMount--");
  onLoadRequest();
});

onMounted(() => {
  // console.log("--onMounted--");
  // 2. 由于升级 3.10.3 版本,导致keepalive出问题,等待官方修复
  onRefreshRequest();
});

onActivated(() => {
  console.log("--onActivated--");
  onRefreshRequest();
});

onDeactivated(() => {
  console.log("--onDeactivated--coin--");
});
const pageVisibility = usePageVisibility();
watch(pageVisibility, (value) => {
  console.log("从后台进入前台: 刷新数据 ", value);
  // 1. 重新获取任务数据状态
});

// 链上地址
const TRONSCAN = {
  url: "https://tronscan.org/#/token20/TME2Soy9WYRTDiNc6xg8Cq2BuAEFCD4Udq",
  copy: "TME2Soy9WYRTDiNc6xg8Cq2BuAEFCD4Udq",
  title: "BDC Token (BDC) | TRONSCAN",
};
const copyUrl = () => {
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast(t("mvp.other.bzcjtb"));
  } else {
    copy(TRONSCAN.copy);
    showToast(t("mvp.other.fzcg"));
  }
};
// 点击-页面跳转
const jumpPage = async (val, isApp = false, params) => {
  // console.log("--val--", val);
  if (isApp) {
    if (val === "taskCenter") {
      bridge.jumpAppRoute(JUMPAPPS()[val]);
    } else if (val === "circle2") {
      bridge.jumpAppRoute(JUMPAPPS()[val]);
    } else if (val.clickUrl) {
      // 1. 埋点
      if (val.type === 2) {
        firebase?.logEvent("BDC_H5_Coin_SMRZ_Click"); // 埋点访问
      } else if (val.type === 14) {
        firebase?.logEvent("BDC_H5_Coin_SCCZ_Click"); // 埋点访问
      } else if (val.type === 17) {
        firebase?.logEvent("BDC_H5_Coin_SJHBD_Click"); // 埋点访问
      } else if (val.type === 26) {
        firebase?.logEvent("BDC_H5_Coin_SQ_Click"); // 埋点访问
      } else if (val.type === 29) {
        firebase?.logEvent("BDC_H5_Coin_JY_Click"); // 埋点访问
      }
      //  2. 跳转
      if (
        val.clickUrl.startsWith("native://") ||
        val.clickUrl.startsWith("https://btcdana.com/")
      ) {
        bridge.jumpAppRoute(val.clickUrl);
      } else {
        // 设置'external'参数为'true'，将成功重定向
        await navigateTo(val.clickUrl, { external: true });
      }
    } else if (val.ios_url || val.android_url) {
      // 原生桥接跳转
      if (
        val.ios_url.startsWith("native://") ||
        val.android_url.startsWith("https://btcdana.com/")
      ) {
        bridge.jumpAppRoute(isiOS.value ? val.ios_url : val.android_url);
      }
      // 第三方链接跳转
      else {
        let thirdUrl = isiOS.value ? val.ios_url : val.android_url;
        // 如果是跳转自己的 h5 页面,则走导航跳转
        if (thirdUrl.startsWith(location.origin + "/fx/")) {
          // 方案一： 路由跳转
          jumpLocalH5PageRoute(thirdUrl);
          // 方案二： 链接加参数
          // jumpLocalH5PageUrl(thirdUrl)
        } else if (thirdUrl.includes("webview=1")) {
          navigateI18nTo({
            path: "/webview",
            query: { src: thirdUrl, title: val.name },
          });
        } else {
          await navigateTo(thirdUrl, {
            external: true,
          });
        }
      }
    }
  } else if (val === "balance") {
    navigateI18nTo({
      path: "/mvp/assetDetails",
    });
  } else if (val === "mining") {
    navigateI18nTo({ path: "/mvp/mining" });
  } else if (val === "toPlan") {
    firebase?.logEvent("BDC_H5_PlanJump");
    if (params.id) {
      const res = await getArticleDetail({ id: `${params.id}` });
      console.log("--跳转之前--", res);
      if (!res.linkUrl) {
        navigateI18nTo({
          path: "/mvp/plan/plan",
          query: { id: params.id },
        });
      }
      // 如果是跳转自己的 h5 页面,则走导航跳转
      else if (res.linkUrl.startsWith(location.origin + "/fx/")) {
        // 方案一： 路由跳转
        jumpLocalH5PageRoute(res.linkUrl);
        // 方案二： 链接加参数
        // jumpLocalH5PageUrl( res.linkUrl)
      } else if (res.linkUrl.includes("webview=1")) {
        navigateI18nTo({
          path: "/webview",
          query: { src: res.linkUrl, title: res.title },
        });
      } else {
        await navigateTo(res.linkUrl, {
          external: true,
        });
      }
    }
  } else if (val === "toRecycling") {
    firebase?.logEvent("BDC_H5_RecyclingJump");
    navigateI18nTo({
      path: "/mvp/recycling/recycling",
    });
  } else if (val === "toDividends") {
    firebase?.logEvent("BDC_H5_DividendsJump");
    navigateI18nTo({
      path: "/mvp/dividends/dividends",
    });
  } else if (val === "faq") {
    firebase?.logEvent("BDC_H5_FAQJump");
    navigateI18nTo({
      path: "/mvp/FAQ/question",
    });
  } else if (val === "majorEvents") {
    // firebase?.logEvent("BDC_H5_FAQJump");
    navigateI18nTo({
      path: "/mvp/coin/majorEvents",
    });
  } else if (val === "bdcIntroduced") {
    // firebase?.logEvent("BDC_H5_FAQJump");
    navigateI18nTo({
      path: "/mvp/coin/bdcIntroduced",
    });
  } else if (val === "ranking") {
    // firebase?.logEvent("BDC_H5_FAQJump");
    navigateI18nTo({
      path: "/mvp/ranking",
    });
  } else if (val === "paper") {
    firebase?.logEvent("BDC_H5_Coin_To_Paper");
    navigateI18nTo({
      path: "/mvp/paper",
    });
  } else if (val === "pledge") {
    switchTabBar("pledge__");
  } else if (val === "webview1") {
    navigateI18nTo({
      path: "/webview",
      query: { src: TRONSCAN.url, title: TRONSCAN.title, isShow: 1 },
    });
  }
};

// 底部安全距离
const safeBottom = computed(() => {
  return isiOS.value ? "20px" : "0px";
});
// 底部空隙
const coinBottom = computed(() => {
  return isiOS.value ? "66px" : "66px";
});
</script>
<style lang="scss" scoped>
.coin {
  position: relative;
  background-color: #f4f9fe;
  // height: calc(100vh - 50 * 2px);
  overflow-y: scroll;
  overflow-x: hidden;
  will-change: scroll-position;

  .content {
    position: relative;
    background: linear-gradient(
      180deg,
      #2a91ff 0.07%,
      rgba(226, 236, 255, 0.3) 99.93%
    );
    background-size: 100% 300 * 2px;
    background-repeat: no-repeat;
    &-bgimg {
      position: absolute;
      top: -115px;
      right: 0 * 2px;
      width: 200 * 2px;
    }
  }

  .chain {
    position: relative;
    z-index: 9;
    width: 100vw;
    padding: 20 * 2px 15 * 2px;
    &-top {
      color: #141924;
      font-size: 17 * 2px;
      font-weight: 590;
      margin-bottom: 12 * 2px;
    }
    &-num {
      position: relative;
      z-index: 9;
      color: #007bff;
      font-size: 24 * 2px;
      font-weight: 700;
      margin-bottom: 24 * 2px;
    }
    &-bottom {
      height: 32 * 2px;
      border-radius: 4 * 2px;
      padding: 0 8 * 2px;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.74);
      backdrop-filter: blur(20px);
      &-text {
        color: rgba(136, 142, 147, 0.9);
        font-size: 14 * 2px;
      }
      &-url {
        color: #007bff;
        font-size: 14 * 2px;
        font-weight: 500;
      }
      &-icon {
        margin-left: 18 * 2px;
        width: 22 * 2px;
        height: 22 * 2px;
      }
    }
  }
  .stage {
    position: relative;
    z-index: 9;
    width: 100vw;
    padding: 15 * 2px;
    border-radius: 12 * 2px;
    background: #fff;
    margin-bottom: 10 * 2px;
    &-title {
      color: #141924;
      font-size: 15 * 2px;
      font-style: normal;
      font-weight: 590;
      justify-content: space-between;
      padding-bottom: 12 * 2px;
      border-bottom: 2px solid rgba(115, 119, 128, 0.15);
      &-value {
        color: #007bff;
        font-size: 15 * 2px;
        font-weight: 590;
      }
    }
    &-center {
      position: relative;
      justify-content: center;
      margin: 12 * 2px 0;
      width: 363 * 2px;
      height: 100 * 2px;
      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 363 * 2px;
        height: 100 * 2px;
      }
      &-text {
        position: relative;
        z-index: 99;
        top: -25px;
        padding: 0 5 * 2px;
        height: 25 * 2px;
        line-height: 25 * 2px;
        text-align: center;
        border-radius: 4 * 2px;
        background: #007bff;

        color: #fff;
        font-size: 15 * 2px;
        font-weight: 590;

        &-sjx {
          position: absolute;
          right: calc(50% - 11px);
          width: 0;
          height: 0;
          border-left: 11px solid transparent; /* 左边透明边框 */
          border-right: 11px solid transparent; /* 右边透明边框 */
          border-top: 14px solid #007bff; /* 顶部边框，决定三角形的颜色和大小 */
        }
      }
    }
    &-botton {
      &-text {
        color: #141924;
        font-size: 13 * 2px;
      }
      &-icon {
        margin: 0 5px;
        width: 18 * 2px;
        height: 18 * 2px;
      }
      &-value {
        color: #007bff;
        font-size: 17 * 2px;
        font-weight: 590;
      }
    }
  }

  .whatisbdc {
    width: 100vw;
    padding: 15 * 2px;
    border-radius: 12 * 2px;
    background: #fff;
    margin-bottom: 10 * 2px;
    &-header {
      justify-content: space-between;
      padding-bottom: 12 * 2px;
      border-bottom: 2px solid rgba(115, 119, 128, 0.15);
      &-title {
        color: #141924;
        font-size: 15 * 2px;
        font-style: normal;
        font-weight: 590;
      }
      &-text {
        color: #999da7;
        font-size: 13 * 2px;
        &-icon {
          margin-left: 8 * 2px;
          width: 10 * 2px;
          height: 10 * 2px;
        }
      }
    }
    &-left {
      width: 120 * 2px;
      height: 120 * 2px;
      margin-right: 15 * 2px;
    }
    &-right {
      color: #999da7;
      font-size: 13 * 2px;
      line-height: 18 * 2px;
      word-break: break-word;
    }
  }
  .timeline {
    width: 100vw;
    padding: 15 * 2px;
    border-radius: 12 * 2px;
    background: #fff;
    margin-bottom: 10 * 2px;
    &-header {
      justify-content: space-between;
      padding-bottom: 12 * 2px;
      margin-bottom: 12 * 2px;
      border-bottom: 2px solid rgba(115, 119, 128, 0.15);
      &-title {
        color: #141924;
        font-size: 15 * 2px;
        font-style: normal;
        font-weight: 590;
      }
      &-text {
        color: #999da7;
        font-size: 13 * 2px;
        &-icon {
          margin-left: 8 * 2px;
          width: 10 * 2px;
          height: 10 * 2px;
        }
      }
    }
  }
  .eventList {
    &-item {
      &-icon {
        width: 12 * 2px;
        height: 12 * 2px;
        border-radius: 12 * 2px;
        background-color: #007bff;
        border: 6px solid #e5f1ff;
        margin-right: 8 * 2px;
      }
      &-timeStr {
        color: #141924;
        font-size: 13 * 2px;
      }
      &-left {
        width: 3px;
        margin-left: 5 * 2px;
        margin-right: 10 * 2px;
        background-color: #e5f1ff;
      }
      &-img {
        width: 148 * 2px;
        height: 78 * 2px;
        border-radius: 8px;
        overflow: hidden;
      }
      &-title {
        @include multi-line-omit(2);
        color: #999da7;
        font-size: 14 * 2px;
        margin-bottom: 6 * 2px;
        word-break: break-word;
      }
      &-desc {
        @include multi-line-omit(2);
        color: #999da7;
        font-size: 14 * 2px;
        word-break: break-word;
        &-lines {
          @include multi-line-omit(4);

          height: 78 * 2px;
          line-height: 20 * 2px !important;
        }
      }
    }
  }
}
.footer {
  width: 100vw;
  display: flex;

  padding-bottom: v-bind("safeBottom");
  &-item {
    height: 46 * 2px;
    width: 100%;
    margin: 7 * 2px 15 * 2px;
    margin-top: 20 * 2px;
    margin-bottom: 30 * 2px;
    background-color: #fff;
    border-radius: 8 * 2px;
    justify-content: center;
    flex-direction: column;
  }
  &-title {
    color: #007bff;
    font-size: 15 * 2px;
    font-weight: 590;
    margin-bottom: 5px;
  }
  &-desc {
    color: #007bff;
    font-size: 11 * 2px;
  }
}
.banner {
  margin-bottom: 10 * 2px;
  width: 100vw;
  padding: 15 * 2px;
  background-color: #fff;
  border-radius: 24px;
  overflow: hidden;
  &-img {
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 24px;
    height: 80 * 2px;
    // width: 363 * 2px;
    width: 100%;
  }
}
</style>
<style lang="scss">
.banner {
  .van-swipe__indicator {
    left: 25% !important;
  }
}
:root:root {
  --van-pull-refresh-head-text-color: #fff;
}
.pull-refresh {
  overflow: initial !important;
  .van-loading__text {
    color: #fff;
  }
  .van-loading--circular {
    color: #fff !important;
  }
}
</style>
